<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的视频 - 局域网视频学习系统</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--neutral-dark);
            margin: 0;
        }

        .page-actions {
            display: flex;
            gap: 10px;
        }

        .filters-bar {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
        }

        .filters-row {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .filter-label {
            font-size: 12px;
            color: #666;
            font-weight: 500;
        }

        .videos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .video-card {
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .video-card:hover {
            transform: translateY(-2px);
        }

        .video-thumbnail {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 48px;
            position: relative;
        }

        .video-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-duration {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
        }

        .video-info {
            padding: 16px;
        }

        .video-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--neutral-dark);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .video-meta {
            font-size: 12px;
            color: #666;
            margin-bottom: 4px;
        }

        .video-tags {
            margin: 8px 0;
        }

        .tag {
            display: inline-block;
            background: rgba(78, 205, 196, 0.1);
            color: var(--teacher-color);
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 11px;
            margin-right: 4px;
            margin-bottom: 4px;
        }

        .video-status {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
        }

        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-badge.approved {
            background: rgba(76, 175, 80, 0.1);
            color: var(--success-color);
        }

        .status-badge.pending {
            background: rgba(255, 167, 38, 0.1);
            color: var(--warning-color);
        }

        .status-badge.rejected {
            background: rgba(244, 67, 54, 0.1);
            color: var(--error-color);
        }

        .video-actions {
            display: flex;
            gap: 8px;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }

        .video-stats {
            display: flex;
            gap: 16px;
            margin-top: 8px;
            font-size: 12px;
            color: #666;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
            grid-column: 1 / -1;
        }

        .empty-state i {
            font-size: 64px;
            margin-bottom: 20px;
            color: #ccc;
        }

        .sidebar-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px;
            border-top: 1px solid var(--border-color);
        }

        .logout-btn {
            width: 100%;
            padding: 12px 16px;
            background: var(--error-color);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .logout-btn:hover {
            background: #c82333;
            transform: translateY(-1px);
        }

        .view-toggle {
            display: flex;
            gap: 5px;
            margin-left: auto;
        }

        .view-btn {
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .view-btn:first-child {
            border-radius: 4px 0 0 4px;
        }

        .view-btn:last-child {
            border-radius: 0 4px 4px 0;
        }

        .view-btn.active {
            background: var(--teacher-color);
            color: white;
            border-color: var(--teacher-color);
        }

        .video-table {
            display: none;
        }

        .video-table.show {
            display: block;
        }

        .videos-grid.hide {
            display: none;
        }

        @media (max-width: 768px) {
            .filters-row {
                flex-direction: column;
                align-items: stretch;
            }
            
            .page-header {
                flex-direction: column;
                gap: 15px;
                align-items: stretch;
            }
            
            .videos-grid {
                grid-template-columns: 1fr;
            }
        }

        .advanced-search-panel {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid var(--border-color);
        }

        .advanced-search-form {
            max-width: 100%;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--neutral-dark);
            margin-bottom: 6px;
        }

        .form-input {
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--teacher-color);
            box-shadow: 0 0 0 2px rgba(52, 144, 220, 0.2);
        }

        .form-actions {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        /* 视频弹窗样式 */
        .video-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
        }

        .video-modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .video-modal-content {
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            max-width: 90vw;
            max-height: 90vh;
            width: 1000px;
            position: relative;
            overflow: hidden;
        }

        .video-modal-header {
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, var(--teacher-color) 0%, #4ECDC4 100%);
            color: white;
        }

        .video-modal-title {
            font-size: 20px;
            font-weight: 600;
            margin: 0;
        }

        .video-modal-close {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }

        .video-modal-close:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .video-modal-body {
            padding: 0;
            position: relative;
        }

        .video-player-container {
            position: relative;
            width: 100%;
            height: 500px;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .video-player {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .video-info-panel {
            padding: 20px;
            background: #f8f9fa;
        }

        .video-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .video-detail-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .video-detail-label {
            font-size: 12px;
            color: #666;
            font-weight: 500;
        }

        .video-detail-value {
            font-size: 14px;
            color: var(--neutral-dark);
            font-weight: 500;
        }

        .video-description {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }

        .video-description h4 {
            margin: 0 0 10px 0;
            color: var(--neutral-dark);
            font-size: 16px;
        }

        .video-description p {
            margin: 0;
            color: #666;
            line-height: 1.6;
        }

        .video-tags-container {
            margin-top: 15px;
        }

        .video-tags-container h4 {
            margin: 0 0 10px 0;
            color: var(--neutral-dark);
            font-size: 14px;
        }

        .video-tag {
            display: inline-block;
            background: rgba(78, 205, 196, 0.1);
            color: var(--teacher-color);
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-right: 6px;
            margin-bottom: 6px;
        }

        .video-loading {
            color: white;
            font-size: 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .video-loading i {
            font-size: 48px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .video-error {
            color: white;
            text-align: center;
            padding: 40px;
        }

        .video-error i {
            font-size: 48px;
            margin-bottom: 15px;
            color: var(--error-color);
        }

        @media (max-width: 768px) {
            .video-modal-content {
                width: 95vw;
                height: 95vh;
                max-height: 95vh;
            }
            
            .video-player-container {
                height: 300px;
            }
            
            .video-details {
                grid-template-columns: 1fr;
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <h3>老师工作台</h3>
        </div>
        <ul class="sidebar-nav">
            <li class="nav-item">
                <a href="dashboard.html" class="nav-link">
                    <i>📊</i> 仪表盘
                </a>
            </li>
            <li class="nav-item">
                <a href="upload.html" class="nav-link">
                    <i>📤</i> 上传视频
                </a>
            </li>
            <li class="nav-item">
                <a href="videos.html" class="nav-link active">
                    <i>🎥</i> 视频管理
                </a>
            </li>
            <li class="nav-item">
                <a href="exam-management.html" class="nav-link">
                    <i>📝</i> 考试管理
                </a>
            </li>
            <li class="nav-item">
                <a href="question-management.html" class="nav-link">
                    <i>❓</i> 题目管理
                </a>
            </li>
            <li class="nav-item">
                <a href="profile.html" class="nav-link">
                    <i>👤</i> 个人资料
                </a>
            </li>
        </ul>
        
        <!-- 退出登录 -->
        <div class="sidebar-footer">
            <button class="logout-btn" onclick="UserManager.logout()">
                <i>🚪</i> 退出登录
            </button>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="content-wrapper">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1 class="page-title">视频管理</h1>
                <div class="view-toggle">
                    <button class="view-btn active" onclick="switchView('grid')" id="gridViewBtn">网格视图</button>
                    <button class="view-btn" onclick="switchView('table')" id="tableViewBtn">列表视图</button>
                </div>
            </div>

            <!-- 筛选栏 -->
            <div class="filters-bar">
                <div class="filters-row">
                    <div class="filter-group">
                        <label class="filter-label">状态筛选</label>
                        <select id="statusFilter" class="form-control" style="width: 120px;">
                            <option value="">全部状态</option>
                            <option value="0">待审核</option>
                            <option value="1">已通过</option>
                            <option value="2">已拒绝</option>
                        </select>
                    </div>
                    <div class="filter-group" style="flex: 1;">
                        <label class="filter-label">搜索视频</label>
                        <div class="search-box">
                            <input type="text" id="searchInput" class="form-control" placeholder="输入视频标题或标签搜索">
                            <i class="search-icon">🔍</i>
                        </div>
                    </div>
                    <div class="filter-group">
                        <label class="filter-label">&nbsp;</label>
                        <button class="btn btn-teacher" onclick="applyFilters()">筛选</button>
                    </div>
                    <div class="filter-group">
                        <label class="filter-label">&nbsp;</label>
                        <button class="btn btn-secondary" onclick="toggleAdvancedSearch()">高级搜索</button>
                    </div>
                </div>
            </div>

            <!-- 高级搜索面板 -->
            <div class="advanced-search-panel" id="advancedSearchPanel" style="display: none;">
                <div class="advanced-search-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">视频标题</label>
                            <input type="text" id="searchTitle" class="form-input" placeholder="输入视频标题">
                        </div>
                        <div class="form-group">
                            <label class="form-label">上传者</label>
                            <input type="text" id="searchUploader" class="form-input" placeholder="输入上传者姓名">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">标签</label>
                            <input type="text" id="searchTags" class="form-input" placeholder="输入标签关键词">
                        </div>
                        <div class="form-group">
                            <label class="form-label">简介内容</label>
                            <input type="text" id="searchIntro" class="form-input" placeholder="输入简介关键词">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">视频状态</label>
                            <select id="searchStatus" class="form-input">
                                <option value="">全部状态</option>
                                <option value="0">待审核</option>
                                <option value="1">已通过</option>
                                <option value="2">已拒绝</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">&nbsp;</label>
                            <div class="form-actions">
                                <button class="btn btn-teacher" onclick="performAdvancedSearch()">搜索</button>
                                <button class="btn btn-secondary" onclick="clearAdvancedSearch()">清空</button>
                                <button class="btn btn-secondary" onclick="toggleAdvancedSearch()">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 视频网格视图 -->
            <div class="videos-grid" id="videosGrid">
                <!-- 视频卡片将在这里生成 -->
            </div>

            <!-- 视频表格视图 -->
            <div class="video-table" id="videoTable">
                <div class="card">
                    <div class="card-header">
                        <h3>视频列表</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>视频信息</th>
                                        <th>状态</th>
                                        <th>上传时间</th>
                                        <th>观看次数</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="videosTableBody">
                                    <!-- 表格行将在这里生成 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 侧边栏切换按钮 -->
    <button class="sidebar-toggle">☰</button>

    <!-- 视频弹窗 -->
    <div id="videoModal" class="video-modal">
        <div class="video-modal-content">
            <div class="video-modal-header">
                <h3 class="video-modal-title" id="videoModalTitle">视频预览</h3>
                <button class="video-modal-close" onclick="closeVideoModal()">&times;</button>
            </div>
            <div class="video-modal-body">
                <div class="video-player-container" id="videoPlayerContainer">
                    <div class="video-loading">
                        <i>⏳</i>
                        <span>正在加载视频...</span>
                    </div>
                </div>
                <div class="video-info-panel" id="videoInfoPanel">
                    <!-- 视频信息将在这里动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <script src="../js/common.js"></script>
    <script>
        let currentVideos = [];
        let filteredVideos = [];
        let currentView = 'grid';
        let isAdvancedSearch = false;

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查权限
            if (!UserManager.hasPermission(1)) {
                Message.error('权限不足');
                setTimeout(() => {
                    window.location.href = '../login.html';
                }, 2000);
                return;
            }

            // 加载视频数据
            loadMyVideos();
            
            // 绑定搜索事件
            document.getElementById('searchInput').addEventListener('input', 
                Utils.debounce(applyFilters, 300)
            );
        });

        // 加载我的视频
        async function loadMyVideos() {
            try {
                const response = await API.get('/video/my');
                if (response.success) {
                    currentVideos = response.videos;
                    filteredVideos = [...currentVideos];
                    renderVideos();
                } else {
                    showEmptyState('加载视频数据失败');
                }
            } catch (error) {
                console.error('加载视频失败:', error);
                showEmptyState('网络错误，请稍后重试');
            }
        }

        // 渲染视频
        function renderVideos() {
            if (currentView === 'grid') {
                renderGridView();
            } else {
                renderTableView();
            }
        }

        // 渲染网格视图
        function renderGridView() {
            const grid = document.getElementById('videosGrid');
            
            if (filteredVideos.length === 0) {
                grid.innerHTML = `
                    <div class="empty-state">
                        <i>🎥</i>
                        <p>暂无视频数据</p>
                        <a href="upload.html" class="btn btn-teacher">立即上传</a>
                    </div>
                `;
                return;
            }
            
            grid.innerHTML = filteredVideos.map(video => `
                <div class="video-card">
                    <div class="video-thumbnail">
                        <i>🎬</i>
                        <div class="video-duration">${video.duration || '00:00'}</div>
                    </div>
                    <div class="video-info">
                        <h3 class="video-title">${video.title}</h3>
                        <div class="video-meta">上传时间: ${Utils.formatTime(video.uploadTime)}</div>
                        ${video.tags ? `
                            <div class="video-tags">
                                ${video.tags.split(',').map(tag => `<span class="tag">${tag.trim()}</span>`).join('')}
                            </div>
                        ` : ''}
                        <div class="video-status">
                            <span class="status-badge ${getStatusClass(video)}">${getStatusText(video)}</span>
                            ${video.status === 2 && video.rejectReason ? `<div style="font-size: 11px; color: var(--error-color); margin-top: 4px;">拒绝原因: ${video.rejectReason}</div>` : ''}
                            <div class="video-actions">
                                <button class="btn btn-sm btn-primary" onclick="viewVideo(${video.id})">查看</button>
                                <button class="btn btn-sm btn-teacher" onclick="editVideo(${video.id})">编辑</button>
                                <button class="btn btn-sm btn-danger" onclick="deleteVideo(${video.id})">删除</button>
                            </div>
                        </div>
                        <div class="video-stats">
                            <div class="stat-item">
                                <i>👁️</i>
                                <span>${video.views || 0} 次观看</span>
                            </div>
                            <div class="stat-item">
                                <i>💾</i>
                                <span>${Utils.formatFileSize(video.size || 0)}</span>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 渲染表格视图
        function renderTableView() {
            const tbody = document.getElementById('videosTableBody');
            
            if (filteredVideos.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="5" class="text-center">
                            <div class="empty-state">
                                <i>🎥</i>
                                <p>暂无视频数据</p>
                            </div>
                        </td>
                    </tr>
                `;
                return;
            }
            
            tbody.innerHTML = filteredVideos.map(video => `
                <tr>
                    <td>
                        <div class="user-info">
                            <div class="user-avatar">🎬</div>
                            <div class="user-details">
                                <h4>${video.title}</h4>
                                <p>${video.intro || '暂无简介'}</p>
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="status-badge ${getStatusClass(video)}">${getStatusText(video)}</span>
                    </td>
                    <td>${Utils.formatTime(video.uploadTime)}</td>
                    <td>${video.views || 0}</td>
                    <td>
                        <div class="action-buttons">
                            <button class="btn btn-sm btn-primary" onclick="viewVideo(${video.id})">查看</button>
                            <button class="btn btn-sm btn-teacher" onclick="editVideo(${video.id})">编辑</button>
                            <button class="btn btn-sm btn-danger" onclick="deleteVideo(${video.id})">删除</button>
                        </div>
                    </td>
                </tr>
            `).join('');
        }

        // 获取状态文本
        function getStatusText(video) {
            if (video.status === 0) return '待审核';
            if (video.status === 1) return '已通过';
            if (video.status === 2) return '已拒绝';
            return '未知状态';
        }

        // 获取状态样式类
        function getStatusClass(video) {
            if (video.status === 0) return 'pending';
            if (video.status === 1) return 'approved';
            if (video.status === 2) return 'rejected';
            return 'unknown';
        }

        // 切换视图
        function switchView(view) {
            currentView = view;
            
            // 更新按钮状态
            document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
            document.getElementById(view + 'ViewBtn').classList.add('active');
            
            // 显示/隐藏视图
            if (view === 'grid') {
                document.getElementById('videosGrid').classList.remove('hide');
                document.getElementById('videoTable').classList.remove('show');
            } else {
                document.getElementById('videosGrid').classList.add('hide');
                document.getElementById('videoTable').classList.add('show');
            }
            
            renderVideos();
        }

        // 应用筛选
        function applyFilters() {
            if (isAdvancedSearch) {
                // 高级搜索模式下不进行本地筛选
                return;
            }
            
            const statusFilter = document.getElementById('statusFilter').value;
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            
            filteredVideos = currentVideos.filter(video => {
                // 状态筛选
                if (statusFilter) {
                    if (video.status.toString() !== statusFilter) return false;
                }
                
                // 搜索筛选
                if (searchTerm) {
                    const searchFields = [video.title, video.intro, video.tags, video.uploaderName].filter(Boolean);
                    if (!searchFields.some(field => field.toLowerCase().includes(searchTerm))) {
                        return false;
                    }
                }
                
                return true;
            });
            
            renderVideos();
        }

        // 切换高级搜索面板
        function toggleAdvancedSearch() {
            const panel = document.getElementById('advancedSearchPanel');
            if (panel.style.display === 'none') {
                panel.style.display = 'block';
            } else {
                panel.style.display = 'none';
                isAdvancedSearch = false;
                // 恢复普通搜索
                loadVideos();
            }
        }

        // 执行高级搜索
        async function performAdvancedSearch() {
            const title = document.getElementById('searchTitle').value.trim();
            const uploader = document.getElementById('searchUploader').value.trim();
            const tags = document.getElementById('searchTags').value.trim();
            const intro = document.getElementById('searchIntro').value.trim();
            const status = document.getElementById('searchStatus').value;
            
            // 检查是否至少有一个搜索条件
            if (!title && !uploader && !tags && !intro && !status) {
                Message.warning('请至少输入一个搜索条件');
                return;
            }
            
            try {
                isAdvancedSearch = true;
                
                const response = await API.post('/video/advanced-search-all', {
                    title: title || null,
                    uploader: uploader || null,
                    tags: tags || null,
                    intro: intro || null,
                    status: status ? parseInt(status) : null
                });
                
                if (response.success) {
                    filteredVideos = response.videos || [];
                    renderVideos();
                    Message.success(`找到 ${filteredVideos.length} 个视频`);
                } else {
                    Message.error(response.message);
                }
            } catch (error) {
                console.error('高级搜索失败:', error);
                Message.error('搜索失败，请稍后重试');
            }
        }

        // 清空高级搜索
        function clearAdvancedSearch() {
            document.getElementById('searchTitle').value = '';
            document.getElementById('searchUploader').value = '';
            document.getElementById('searchTags').value = '';
            document.getElementById('searchIntro').value = '';
            document.getElementById('searchStatus').value = '';
        }

        // 查看视频
        async function viewVideo(videoId) {
            const video = currentVideos.find(v => v.id === videoId);
            if (!video) {
                Message.error('视频不存在');
                return;
            }

            // 显示弹窗
            showVideoModal(video);
        }

        // 显示视频弹窗
        async function showVideoModal(video) {
            const modal = document.getElementById('videoModal');
            const title = document.getElementById('videoModalTitle');
            const playerContainer = document.getElementById('videoPlayerContainer');
            const infoPanel = document.getElementById('videoInfoPanel');

            // 设置标题
            title.textContent = video.title;

            // 显示加载状态
            playerContainer.innerHTML = `
                <div class="video-loading">
                    <i>⏳</i>
                    <span>正在加载视频...</span>
                </div>
            `;

            // 显示弹窗
            modal.classList.add('show');

            try {
                // 直接使用视频流URL
                const streamUrl = `/api/video/stream/${video.id}`;
                
                // 创建视频播放器
                const videoElement = document.createElement('video');
                videoElement.className = 'video-player';
                videoElement.controls = true;
                videoElement.preload = 'metadata';
                videoElement.src = streamUrl;
                
                // 视频加载事件
                videoElement.addEventListener('loadedmetadata', () => {
                    playerContainer.innerHTML = '';
                    playerContainer.appendChild(videoElement);
                });
                
                // 视频播放结束事件
                videoElement.addEventListener('ended', () => {
                    console.log('老师端视频播放结束');
                    // 老师端不需要记录学习进度，只需要记录观看
                });

                // 视频错误处理
                videoElement.addEventListener('error', (e) => {
                    console.error('视频播放错误:', e);
                    console.error('错误详情:', {
                        error: videoElement.error,
                        networkState: videoElement.networkState,
                        readyState: videoElement.readyState,
                        src: videoElement.src,
                        currentSrc: videoElement.currentSrc,
                        currentTime: videoElement.currentTime,
                        duration: videoElement.duration
                    });
                    
                    let errorMessage = '视频播放失败';
                    let errorDetail = '请检查网络连接或联系管理员';
                    let showError = true;
                    
                    if (videoElement.error) {
                        switch (videoElement.error.code) {
                            case 1:
                                errorMessage = '视频加载被中止';
                                errorDetail = '网络连接中断或服务器响应超时';
                                break;
                            case 2:
                                errorMessage = '网络错误';
                                errorDetail = '无法连接到视频服务器';
                                break;
                            case 3:
                                errorMessage = '视频解码错误';
                                errorDetail = '视频格式不支持或文件损坏';
                                // 如果是播放结束后的解码错误，可能是正常的
                                if (videoElement.currentTime > 0 && videoElement.duration > 0 && 
                                    Math.abs(videoElement.currentTime - videoElement.duration) < 1) {
                                    console.log('检测到播放结束后的解码错误，可能是正常的');
                                    showError = false;
                                }
                                break;
                            case 4:
                                errorMessage = '视频格式不支持';
                                errorDetail = '浏览器不支持此视频格式';
                                break;
                            default:
                                errorMessage = '未知播放错误';
                                errorDetail = `错误代码: ${videoElement.error.code}`;
                        }
                    }
                    
                    // 只有在需要显示错误的情况下才显示错误界面
                    if (showError) {
                        playerContainer.innerHTML = `
                            <div class="video-error">
                                <i>❌</i>
                                <h3>${errorMessage}</h3>
                                <p>${errorDetail}</p>
                                <div style="margin-top: 16px;">
                                    <button class="btn btn-primary" onclick="location.reload()">重新加载</button>
                                    <button class="btn btn-secondary" onclick="window.history.back()">返回</button>
                                </div>
                            </div>
                        `;
                    }
                });
            } catch (error) {
                console.error('获取视频流失败:', error);
                playerContainer.innerHTML = `
                    <div class="video-error">
                        <i>❌</i>
                        <h3>网络错误</h3>
                        <p>无法连接到服务器，请稍后重试</p>
                    </div>
                `;
            }

            // 生成视频信息面板
            generateVideoInfoPanel(video, infoPanel);
        }

        // 生成视频信息面板
        function generateVideoInfoPanel(video, container) {
            container.innerHTML = `
                <div class="video-details">
                    <div class="video-detail-item">
                        <span class="video-detail-label">视频状态</span>
                        <span class="video-detail-value">
                            <span class="status-badge ${getStatusClass(video)}">${getStatusText(video)}</span>
                        </span>
                    </div>
                    <div class="video-detail-item">
                        <span class="video-detail-label">上传时间</span>
                        <span class="video-detail-value">${Utils.formatTime(video.uploadTime)}</span>
                    </div>
                    <div class="video-detail-item">
                        <span class="video-detail-label">观看次数</span>
                        <span class="video-detail-value">${video.views || 0} 次</span>
                    </div>
                    <div class="video-detail-item">
                        <span class="video-detail-label">文件大小</span>
                        <span class="video-detail-value">${Utils.formatFileSize(video.size || 0)}</span>
                    </div>
                    <div class="video-detail-item">
                        <span class="video-detail-label">视频时长</span>
                        <span class="video-detail-value">${video.duration || '未知'}</span>
                    </div>
                    <div class="video-detail-item">
                        <span class="video-detail-label">上传者</span>
                        <span class="video-detail-value">${video.uploaderName || '未知'}</span>
                    </div>
                </div>
                
                ${video.intro ? `
                    <div class="video-description">
                        <h4>视频简介</h4>
                        <p>${video.intro}</p>
                    </div>
                ` : ''}
                
                ${video.tags ? `
                    <div class="video-tags-container">
                        <h4>标签</h4>
                        <div>
                            ${video.tags.split(',').map(tag => 
                                `<span class="video-tag">${tag.trim()}</span>`
                            ).join('')}
                        </div>
                    </div>
                ` : ''}
                
                ${video.status === 2 && video.rejectReason ? `
                    <div class="video-description" style="border-left: 4px solid var(--error-color);">
                        <h4 style="color: var(--error-color);">拒绝原因</h4>
                        <p style="color: var(--error-color);">${video.rejectReason}</p>
                    </div>
                ` : ''}
            `;
        }

        // 关闭视频弹窗
        function closeVideoModal() {
            const modal = document.getElementById('videoModal');
            modal.classList.remove('show');
            
            // 停止视频播放
            const videoElement = modal.querySelector('.video-player');
            if (videoElement) {
                videoElement.pause();
                videoElement.src = '';
            }
        }

        // 点击弹窗外部关闭
        document.addEventListener('click', function(event) {
            const modal = document.getElementById('videoModal');
            if (event.target === modal) {
                closeVideoModal();
            }
        });

        // ESC键关闭弹窗
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeVideoModal();
            }
        });

        // 编辑视频
        function editVideo(videoId) {
            // 这里可以跳转到编辑页面或打开编辑模态框
            Message.info('编辑功能待开发');
        }

        // 删除视频
        function deleteVideo(videoId) {
            const video = currentVideos.find(v => v.id === videoId);
            if (!video) return;
            
            Modal.confirm(`确认删除视频 "${video.title}" 吗？此操作不可恢复！`, async () => {
                try {
                    const response = await API.delete(`/video/${videoId}`);
                    if (response.success) {
                        Message.success('视频删除成功');
                        loadMyVideos();
                    } else {
                        Message.error(response.message || '删除失败');
                    }
                } catch (error) {
                    console.error('删除视频失败:', error);
                    Message.error('删除失败：' + error.message);
                }
            });
        }

        // 显示空状态
        function showEmptyState(message) {
            const container = document.getElementById('videosGrid');
            container.innerHTML = `
                <div class="empty-state" style="grid-column: 1 / -1;">
                    <i>🎥</i>
                    <p>${message}</p>
                </div>
            `;
        }
    </script>
</body>
</html>
